<template>
  <div>
    <div style="display: inline-block; width: 100%">
      <el-row>
        <el-col :span="20">
          <h3>图层清单</h3>
        </el-col>
        <el-col :span="4">
          <el-button
            size="small"
            type="primary"
            @click="addOrEditSupportLayers('add')"
            >添加</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="vscroll" style="overflow-y: auto; height: 290px">
      <div id="listData">
        <el-table :data="supportLayers">
          <template v-for="(item, index) in columns">
            <el-table-column
              :label="item.title"
              :prop="item.dataIndex"
              :key="index"
            >
            </el-table-column>
          </template>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <a
                class="edit-item"
                @click="addOrEditSupportLayers('edit', scope.row)"
                >编辑</a
              >
              <el-popconfirm
                title="是否要删除这个图层？"
                @confirm="deleteSupportLayers(scope.row.id)"
                @cancel="deleteCancel"
                confirm-button-text="删除"
                cancel-button-text="取消"
              >
                <a class="edit-item" slot="reference">删除</a>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <addSupportLayers-form
      ref="AddSupportLayersForm"
      @refreshSupportLayers="getList"
      @addSupportLayers="addSupportLayers"
      @editSupportLayers="editSupportLayers"
    ></addSupportLayers-form>
  </div>
</template>

<script>
import AddSupportLayersForm from "./addSupportLayersForm";
export default {
  props: {},
  components: {
    AddSupportLayersForm,
  },
  data() {
    return {
      supportLayers: null,
      columns: [
        {
          title: "白膜图层ID",
          dataIndex: "whiteid",
          key: "whiteid",
          align: "center",
          ellipsis: true,
        },
        {
          title: "图层名称",
          dataIndex: "name",
          key: "name",
          width: 100,
          ellipsis: true,
          align: "left",
        },
        {
          title: "服务地址",
          dataIndex: "hosturl",
          key: "hosturl",
          align: "center",
          ellipsis: true,
        },

        // {
        //   title: "修改",
        //   dataIndex: "edit",
        //   key: "edit",
        //   width: 60,
        //   scopedSlots: { customRender: "action" },
        // },
      ],
      pagination: {
        defaultPageSize: 5,
      },
    };
  },
  computed: {},
  watch: {},
  mounted(){
    this.init();
  },
  methods: {
    //初始化数据获取
    init() {
      this.supportLayers = null;
      this.getList();
    },
    //获取微件字段扩展信息
    getList() {
      agcim.widgets.widgetExtendField.getWidgetInfoByCode("agcim-controlHeightAnalysis").then((res) => {
        this.supportLayers = JSON.parse(res.content.widgetLevelsData);
      });
    },
    //添加/编辑一条字段扩展信息
    addOrEditSupportLayers(type, item) {
      this.$nextTick(() => {
        this.$refs.AddSupportLayersForm.init(type === "edit" ? item : "");
      });
    },
    //根据字段扩展信息的行id删除整条数据
    deleteSupportLayers(_id) {
      // agcim.widgets.widgetExtendField.deleteWidgtInfoByRowDataId(_id,"agcim-controlHeightAnalysis").then((res) => {
      agcim.widgets.widgetExtendField.deleteWidgtTableDataByRowDataId(_id,"agcim-controlHeightAnalysis").then((res) => {
        if (res.success) {
          this.$message.success("删除成功");
          this.getList();
        }
      });
    },
    //添加一行字段扩展信息
    addSupportLayers(rowData) {
      // agcim.widgets.widgetExtendField.addWidgtInfoData(rowData,"agcim-controlHeightAnalysis").then((res) => {
      agcim.widgets.widgetExtendField.addWidgtTableData(rowData,"agcim-controlHeightAnalysis").then((res) => {
        if (res.success) {
          this.$message.success("保存成功");
          this.getList();
        } else {
          this.$message.error("保存失败");
        }
      });
    },
    //编辑一行字段扩展信息
    editSupportLayers(rowData) {
      // agcim.widgets.widgetExtendField.saveOrUpdataWidgtTableData(rowData,"agcim-controlHeightAnalysis").then((res) => {
      agcim.widgets.widgetExtendField.updataWidgtTableData(rowData,"agcim-controlHeightAnalysis").then((res) => {
        if (res.success) {
          this.$message.success("修改成功");
          this.getList();
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    deleteCancel() {},
  },
};
</script>

<style scoped>
.supportLayers ul {
  padding: 0;
  list-style: none;
}
.supportLayers ul .listSty {
  display: flex;
  justify-content: space-between;
}
.el-table .edit-item{
  padding-right:  10px;
}
/* el-table表格hover 修改背景色 */
.el-table,
.el-table__expanded-cell {
  background: rgba(255, 255, 255, 0);
}
.el-table::v-deep th,
.el-table::v-deep tr {
  background: rgba(255, 255, 255, 0);
}
.el-table::v-deep thead {
  color: rgba(255, 255, 255, 0.8);
}
.el-table::v-deep {
  color: rgb(255, 255, 255);
}

.el-table::v-deep .el-table__body tr:hover > td {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.el-table::v-deep .el-table__body tr.current-row > td {
  background-color: rgba(255, 255, 255, 0.3) !important;
}
.el-table::v-deep .el-table__body tr.hover-row.current-row > td,
.el-table::v-deep .el-table__body tr.hover-row--striped.current-row > td,
.el-table::v-deep .el-table__body tr.hover-row--striped > td,
.el-table::v-deep .el-table__body tr.hover-row > td {
  background: rgba(255, 255, 255, 0.3) !important;
}
</style>
